<template>
    <q-page>
        <q-toolbar color="primary" >
            <q-toolbar-title class="q-pa-none"></q-toolbar-title>
            <q-toolbar-title shrink v-if="currentTags.length">
                <span slot="subtitle" class="text-right">
                <div><b>{{currentTags.length}}</b>个</div>
                <div>当前选择</div>
                </span>
            </q-toolbar-title>

            <q-toolbar-title shrink>
                <span slot="subtitle" class="text-right">
                <div>&nbsp;</div>
                <div>共<b>{{alltags.length}}</b>个</div>
                </span>
            </q-toolbar-title>
        </q-toolbar>
        <div class="bg-white q-pa-md">
            <q-btn 
                v-for="(item) in alltags" 
                :key="'key_'+item.key"
                :label="item.key" 
                @click.stop="onClickTags(item)"
                :outline="!item.checked"
                :color="!!item.checked ? 'primary' : 'grey-10'"
                no-ripple	
                rounded
                class="q-ma-xs"
                size="xs" >
                <q-chip floating color="grey-6">{{item.count}}</q-chip>
            </q-btn>
        </div>
        <q-btn 
            round class="fixed"
            color="secondary" icon="merge_type" size="lg"
            v-if="currentTags.length > 1"
            style="right: 15px; bottom: 135px; z-index: 99"
            @click="updateTags('merge')"
        />
        <q-btn 
            round class="fixed"
            color="primary" icon="delete" size="lg"
            v-if="currentTags.length" 
            style="right: 15px; bottom: 60px; z-index: 99"
            @click="updateTags('delete')"
        />
    </q-page>
</template>

<script>
export default {
    name: 'PageOfficalAccount',
    data() {
        return {
            alltags: [],
            currentTags: []
        }
    },
    mounted(){
        this.$api.ui.pageTitle = '标签管理'
        this.getAllTags()
    },
    methods: {
        getAllTags(){
            this.$api.offical.loadAllTags( data => {
                console.log('all tags::', data )
                this.alltags = [...data]
            })
            // this.$api.offical.loadAccountByCategory( data => {
            //     let allTags = []
            //     let allTagsMap = []
            //     data.map( account => {
            //         let { tags } = account
            //         tags.map( item => {
            //             let [key, count] = item.split('|')
            //             if( !key ) {
            //                 return
            //             }
            //             // let _key = 't_' + key.charCodeAt()
            //             if( allTagsMap.includes(key) ){
            //                 let _index = allTagsMap.indexOf(key)
            //                 allTags[_index].count += Number(count)
            //             } else {
            //                 allTagsMap.push( key )
            //                 allTags.push({
            //                     key,
            //                     count: Number(count),
            //                     checked: false
            //                 })
            //             }
            //         })
            //     })
            //     console.log( allTags )
            //     allTags.sort( (A, B) => {
            //         return B.count > A.count ? 1 : -1
            //     })
            //     this.alltags = [...allTags]
            // })
        },
        onClickTags( item ) {
            for( let i = 0; i < this.alltags.length; i ++ ){
                let tag = this.alltags[i]
                let { key } = tag
                if( item.key == key ){
                    if( !tag.checked ){
                        this.currentTags.push( tag )
                    } else {
                        let index = 0;
                        this.currentTags.map( (_item, index) => {
                            if( _item.key == item.key ){
                                this.currentTags.splice( index, 1 )
                            }
                        })
                    }
                    tag.checked = !tag.checked
                    break
                }
            }
        },
        updateTags( type ){
            console.log('this.currentTags', type, this.currentTags )
            const TYPES = {
                delete: '删除',
                merge: '合并'
            }
            this.$q.dialog({
                title: `确认${TYPES[type]}？`,
                message: `该操作不可逆`,
                ok: '确认',
                cancel: '取消'
            }).then(() => {
                let targetTags = this.currentTags.map( item => {
                    return item.key
                })
                this.$api.offical.updateTags( type, targetTags, data => {
                    this.$q.notify({
                        message: `${TYPES[type]}成功`,
                        color: 'teal',
                        position: 'top'
                    });
                    this.getAllTags()
                    this.currentTags = []
                })
            }).catch(() => {
                // cancel 
            });
        }
    },
    computed: {
        
    }
}
</script>

<style>
.fixed_buttons{
    position: fixed;
    right: 15px; 
    bottom: 65px;
    width: 60px;
}
.fixed_buttons button{
    margin-top: 10px;
}
</style>